<template>
  <m-window-frame
    title="校验模型"
    style="height: 100%"
    :okLoading="model.saveLoading"
    class="v-validate-rule"
    @cancel="model.close()"
  >
    <attr-tips type="validateRule"></attr-tips>

    <div class="v-validate-rule-content g-pd-lr-32 g-pd-tb-24">
      <field-row
        ref="rangeWrapper"
        class="v-validate-range g-m-b-26 g-relative"
        :class="isOverflow ? 'overflow' : ''"
        :title="$t('校验范围')"
        :fix-label-width="98"
      >
        <el-input
          readonly
          :placeholder="model.modelRange.length === 0 ? $t('请选择校验范围') : ''"
        >
          <template
            v-if="model.modelRange.length > 0"
            #prefix
          >
            <div
              ref="rangeContent"
              class="g-ac-s gap-10"
            >
              <text-icon
                v-for="item in model.modelRange"
                :key="item.id"
                :label="item.name"
                :icon="item.icon"
              />
            </div>
          </template>
        </el-input>
        <img
          class="more-icon g-pointer"
          src="statics/icons/app/iconmore.png"
          @click="model.choiceModelRange()"
        />
      </field-row>
      <field-row
        class="g-m-b-26"
        :title="$t('校验分组')"
        :fix-label-width="98"
      >
        <div class="g-flex g-flex-1 g-jc-sb g-ai-c">
          <el-tree-select
            v-model="model.selectedKeys"
            :data="model.validateGroupTreeData"
            default-expand-all
            check-on-click-node
            multiple
            show-checkbox
            :placeholder="$t('请选择校验分组')"
          >
            <template #default="{ data: { label, icon } }">
              <img :src="icon" />
              {{ label === "全部分组" ? $t(label) : label }}
            </template>
          </el-tree-select>
          <el-button
            link
            type="primary"
            class="g-m-l-10"
            style="color: var(--md-primary-color)"
            @click="model.openValidateGroupWindow()"
          >
            {{ $t("查看校验分组") }}
          </el-button>
        </div>
      </field-row>
      <field-row
        class="g-m-b-26"
        :title="$t('最小严重程度')"
        :fix-label-width="98"
      >
        <el-radio-group v-model="model.severity">
          <el-radio
            v-for="item in minimumSeverity"
            :key="item.value"
            :label="item.value"
          >
            {{ $t(item.label) }}
          </el-radio>
        </el-radio-group>
      </field-row>
      <field-row>
        <template #title>
          <el-checkbox
            v-model="model.excludeReadOnly"
            @change="model.updateData({ excludeReadOnly: model.excludeReadOnly })"
          >
            {{ $t("排除只读元素") }}
          </el-checkbox>
        </template>
      </field-row>
    </div>

    <template #footer-right>
      <el-button
        size="small"
        @click="model.close()"
      >
        {{ $t("关 闭") }}
      </el-button>
      <el-button
        type="primary"
        size="small"
        :loading="model.validationLoading"
        @click="model.triggerCheck()"
      >
        {{ $t("开始校验") }}
      </el-button>
    </template>
  </m-window-frame>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref, watch } from "vue";
import { ValidateRuleModel } from "./ValidateRuleModel";
import { minimumSeverity } from "./constants";
const { ModelData, AttrTips, FieldRow, TextIcon, MWindowFrame } = require("@/mdesign-lib/mdesign-app.umd.js");
import { LocationQuery } from "vue-router";

interface Query extends LocationQuery {
  projectId: string;
}
const query = app.$route.query as Query;
const model = reactive(new ValidateRuleModel(query.projectId, query.modelId as string));
const isOverflow = ref(false);
const rangeWrapper = ref();
const rangeContent = ref();

onMounted(async () => {
  await model.initial();
  calcOverflow();
});

function calcOverflow() {
  nextTick(() => {
    if (rangeWrapper.value && rangeContent.value) {
      isOverflow.value = rangeWrapper.value.$el.querySelector(".v-field-row__content").offsetWidth < rangeContent.value.offsetWidth;
    }
  });
}

watch(
  () => model.modelRange,
  (range: ModelData[]) => {
    if (range.length > 0) {
      calcOverflow();
    }
  }
);
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-validate-rule {
  .v-validate-range {
    .el-input__wrapper {
      justify-content: flex-start;
      width: 100%;

      .el-input__prefix {
        width: 100%;
        padding-right: 30px;

        .el-input__prefix-inner {
          width: 100%;
          justify-content: flex-start;
          overflow: hidden;
        }
      }

      .el-input__inner {
        --el-input-inner-height: 26px;
      }
    }

    .more-icon {
      position: absolute;
      top: 7px;
      right: 10px;
    }

    &.overflow {
      .el-input__prefix::after {
        position: relative;
        margin-left: 4px;
        bottom: -3px;
        color: #000;
        content: "...";
      }
    }
  }
}
</style>
